﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>

    <link href="css/common.css" rel="stylesheet" type="text/css">
    <link href="css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/comment.js"></script>
</head>
<style>
    body,
    html {
        width: 7.5rem;
    }
    
    .queitem {
        width: 6.9rem;
        margin: auto;
        padding: .24rem 0;
    }
    
    .questionshow {
        width: 6.9rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .quename {
        width: 5rem;
        color: #1B1B1B;
        font-size: .3rem;
        display: flex;
        justify-content: flex-start;
    }
    
    .quename2 {
        width: 4.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .quename1 {
        color: #1B1B1B;
        font-size: .3rem;
        display: flex;
        justify-content: flex-start;
    }
    
    .queshow {
        color: #409EFF;
        font-size: .24rem;
    }
    
    .queshow img {
        width: .22rem;
        height: .22rem;
        vertical-align: middle;
    }
    
    .quename1 {
        width: 6.9rem;
    }
    
    .answer {
        margin-top: .26rem;
        color: #1B1B1B;
    }
    
    .answera {
        color: #409EFF;
    }
    
    .ansyall {
        width: 6.9rem;
        display: flex;
        justify-content: space-between;
        margin-top: .26rem;
    }
    
    .ansyic {
        width: 6rem;
        color: #666666;
        font-size: .26rem;
        display: flex;
        justify-content: flex-start;
    }
    
    .ansyitem {
        width: 5rem;
    }
    
    .loadmore {
        width: 3rem;
        height: 3rem;
        margin: 4rem auto;
    }
    
    .loadmore img {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
    }
    
    .morelook {
        text-align: center;
        color: #333;
        font-size: .24rem;
        margin-top: .4rem;
        padding-bottom: 1rem;
    }
    
    .showerViplo {
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, .2);
        z-index: 9999;
        top: 0;
    }
    
    .loadmoreshowerVip {
        width: 3rem;
        height: 3rem;
        background: rgba(0, 0, 0, 0);
        margin: 4rem auto 0;
        /* display: none; */
    }
    
    .loadmoreshowerVip img {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
    }
    
    .quenamestem {
        width: 6.9rem;
        margin-bottom: 0.24rem;
        padding: .3rem;
        background-color: #fef5f5;
    }
</style>

<body>
    <div id='app'>

        <div v-if="chenload">
            <div id='bot'>
                <div v-if='Number(quedata.length)>0'>
                    <div class="queitem" v-for='(item,index) in quedata' :key='index'>
                        <div class="quename1 quenamestem" v-if="Number(item.stem_id)>0">
                            <p v-html='item.stem'></p>
                        </div>
                        <div class='questionshow' v-if='Number(item.pushsh)==1'>
                            <div class="quename">
                                {{index+1}}.
                                <p class="quename2" v-html='item.question'></p>
                            </div>
                            <div class="queshow" @click='pushclick(item,index)'>
                                <span>展开</span>
                                <img src="img/conpushtop.png" alt="">
                            </div>
                        </div>
                        <div id='allque' v-else>
                            <div class="quename1">
                                {{index+1}}.
                                <div v-html='item.question'></div>
                            </div>
                            <div class="answer">
                                正确答案：<span class="answera">{{item.answer}}</span>
                            </div>
                            <div class="ansyall">
                                <div class="ansyic">
                                    解析：
                                    <div class="ansyitem" v-html='item.analysis'></div>
                                </div>
                                <div class="queshow queshow1" @click='pushclick(item,index)'>
                                    <span>收起</span>
                                    <img src="img/conpush.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="morelook" v-if='Number(pagedata.length)>=20' @click='clickmore'>点击查看更多</p>
                    <p class="morelook" v-else>暂无更多数据</p>
                </div>
                <div v-else class="morelook">
                    暂无更多数据
                </div>
            </div>
        </div>
        <div class="loadmore" v-else>
            <img src="img/load.gif" alt="">
        </div>

        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="img/load.gif" alt="">
            </div>
        </div>

    </div>

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    <!-- <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script> -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-router.min.js"></script>
    <script type="text/javascript" src="./js/layer.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                // url: 'https://n.qikeya.com/saas/public/index.php/',
                url: 'https://appapi.qikeya.cn/',
                chapter_id: '',
                subject_id: '',
                page: 0,
                quedata: [],
                chenload: false,
                showload: false,
                pagedata: [],
            },
            methods: {
                clickmore() {
                    var that = this;
                    that.showload = true;
                    that.page = Number(that.page) + 1;
                    that.getQuestion();
                },
                pushclick(item, index) {
                    var that = this;
                    if (Number(item.pushsh) == 1) {
                        item.pushsh = 2;
                    } else {
                        item.pushsh = 1;
                    }
                    that.quedata[index] = item;
                },
                getQuestion() {
                    var that = this;
                    var data = {
                        subject_id: that.subject_id,
                        chapter_id: that.chapter_id,
                        page: that.page,
                    }
                    utilJs.postMethod(that.url + "tkapi/Book/getQuestion", data, (res) => {
                        if (Number(res.errcode) == 0) {
                            var data = res.data;
                            for (var i = 0; i < data.length; i++) {
                                data[i]['pushsh'] = 1;
                            }
                            that.pagedata = data;
                            if (Number(that.page) == 0) {
                                that.quedata = data;
                            } else {
                                that.quedata = that.quedata.concat(data);
                            }
                        }
                        that.chenload = true;
                        that.showload = false;
                    })
                },
                GetQueryString(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                }
            },
            mounted() {
                this.subject_id = this.GetQueryString('subject_id');
                this.chapter_id = this.GetQueryString('chapter_id');
                this.getQuestion();
            }
        })
    </script>
</body>

</html>